import React, { Component } from 'react';
import { inject } from 'mobx-react';
import { Button } from 'antd-mobile';
import { RouterStore } from 'mobx-react-router';
import UserEntity from '../../entity/UserEntity';
import AuthStore from '../../stores/AuthStore';
import ComponentStore from '../../stores/ComponentStore';
import './Me.scss';

interface MeProps {
  routingStore: RouterStore;
  componentStore: ComponentStore;
  authStore: AuthStore;
}

@inject('routingStore', 'authStore', 'componentStore')
export default class Me extends Component<MeProps> {
  toLogout = () => {
    this.props.authStore.isLogin = false;
    this.props.routingStore!.push('/login');
  }
  render(): JSX.Element {
    const { routingStore, componentStore } = this.props;
    const user = new UserEntity();
    const avatarStyle: object = {
      backgroundImage: `url(${user.avatar})`,
      backgroundSize: 'cover'
    };
    return (
      <section className="me-container">
        <div className="user-info">
          <div 
            className="avatar" 
            style={avatarStyle}
          />
          <div className="account">{user.account}</div>
          <div 
            className="modify-psw" 
            onClick={() => {
              routingStore.push('/reset'); 
              componentStore.setResetTitle('修改密码');
            }}
          >修改密码
          </div>
        </div>
        
        <div className="auth-list">
          <div>所属部门：市公安局</div>
          <div className="auth-name">访问权限：市公安局</div>
        </div>
        
        <Button 
          className="logout-btn" 
          onClick={
          () => {
            this.toLogout();
          }}
        >
        注销
        </Button>
      </section>
    );
  }
}